<template>
	<view>
		<view class="classification" style="margin-top: 25rpx;">
			<view class="classify" v-if="list">
				<image :src="baseurl+'/imgs/nav1.png'" mode="widthFix"></image>
				<view>总商品数：{{list.totaluser}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/nav2.png'" mode="widthFix"></image>
				<view>总访问数：{{list.totalviews}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/nav3.png'" mode="widthFix"></image>
				<view>总订单数：{{list.totalorder}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/nav4.png'" mode="widthFix"></image>
				<view>总金额：{{list.totalorderamount}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/nav5.png'" mode="widthFix"></image>
				<view>商家区域排名：{{list.rank}}</view>
			</view>
		</view>
		
		<view class="classification" style="margin-top: 25rpx;">
			<view class="classify" v-if="list">
				<image :src="baseurl+'/imgs/navv1.png'" mode="widthFix"></image>
				<view>店铺收藏：{{list.todayusersignup}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/navv2.png'" mode="widthFix"></image>
				<view>加购物车：{{list.todayuserlogin}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/navv3.png'" mode="widthFix"></image>
				<view>今日订单：{{list.todayorder}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/navv4.png'" mode="widthFix"></image>
				<view>未处理订单：{{list.unsettleorder}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/navv5.png'" mode="widthFix"></image>
				<view>七日新增：{{list.sevendnu}}</view>
			</view>
			<view class="classify" >
				<image :src="baseurl+'/imgs/navv6.png'" mode="widthFix"></image>
				<view>今日总额：{{list.sevendau}}</view>
			</view>
		</view>
		
		<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA" @touchend="moveLineA"></canvas>
		<view style="width: 100%;height: 300rpx;"></view>
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js'; //引入js文件
	var _self; //用于全局使用this
	var canvaLineA = null; //uCharts实例
	export default {
		data() {
			return {
				app: getApp().globalData,
				baseurl: getApp().globalData.baseurl,
				shop_id:'',
				list:{},
				cWidth: '',
				cHeight: '', //画布的宽高
				data: { //数据
					// categories: ["2012", "2013", "2014", "2015", "2016", "2017"],
					// series: [{
					// 	name: "成交量A",
					// 	data: [35, 8, 25, 37, 4, 20]
					// }, {
					// 	name: "成交量B",
					// 	data: [70, 40, 65, 100, 44, 68]
					// }, {
					// 	name: "成交量C",
					// 	data: [100, 80, 4, 150, 112, 132]
					// }]
				}

			}
		},
		onLoad(e) {
			console.log(e)
			if(e.shop_id){
				this.shop_id = e.shop_id
				this.index()
			}
			
		},
		onReady() {
		    
		    
		},
		methods:{
			index(){
				var that = this
				this.app.post('/api/project/kzt', {
					shop_id: this.shop_id
				}).then(res => {
					that.list = res.list
					var createlist = that.list.createlist
					var paylist = that.list.paylist
					
					let keysArray = Object.keys(createlist);
					let keysValue = Object.values(createlist);
					let keysValue2 = Object.values(paylist);
					that.data = {
						categories: keysArray,
						series: [
							{
								name: "成交数",
								data: keysValue2
							}, {
								name: "订单数",
								data: keysValue
							}
							// , {
							// 	name: "成交量C",
							// 	data: [100, 80, 4, 150, 112, 132]
							// },
						]
					}
					
					that.cWidth = uni.upx2px(750);
					that.cHeight = uni.upx2px(500); //设置宽高
					_self = this //声明this
					_self.showLineA("canvasLineA", _self.data); //触发执行函数
					
					
				})
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#facc14', '#f04864', '#90ed7d'], //每一条的颜色
					fontSize: 11, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					xAxis: { //X轴配置
						gridColor: '#CCCCCC', //X轴网格颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self.cWidth, //canvas宽度，单位为px
					height: _self.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'curve' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineA(e) {
				canvaLineA.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			}

			  
		}
	}
</script>

<style lang="scss">
	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
	
	
	.classification {
		display: flex;
		width: 750rpx;
		flex-wrap: wrap;
	
		.classify {
			width: 33%;
			margin-bottom: 40rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
	
			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 10rpx;
			}
	
			view {
				width: 100%;
				text-align: center;
				font-size: 24rpx;
				color: #3D3D3D;
				margin-top: 10rpx;
			}
		}
	}
</style>